<template>
  <div>
    <h1>Chatbot</h1>
    <div>
      <textarea v-model="message" placeholder="Type your message" 
        rows="8"
        cols="40"
        @input="adjustTextareaHeight">
      </textarea>
      <button @click="sendMessage">Send</button>
    </div>
    <div v-if="response">
      <h2>Response:</h2>
      <p>{{ response }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '',
      response: ''
    }
  },
  methods: {
    async sendMessage() {
      const res = await axios.post('http://localhost:5000/chat', { message: this.message });
      this.response = res.data.response;
    }
  }
}
</script>
